<template>
	<view style="background-color: #F5F5F5;">
		<view class="header">
			<view>
				<!-- <text>待收货</text> -->
				<text class="header-time"> 大约2019-05-06到达</text>
			</view>
			<image src="../../../static/Mine/close.png"></image>
			<!-- <image src="../../../static/Mine/close.png" v-if="status==icon.name"></image>			 -->
		</view>
		<view class="conent_1">
			<view>{{user.nickname}} {{user.mobile}}</view>
			<view class="address">
				<image src="../../../static/Mine/address.png"></image>
				<!-- <text>{{orderinfo.address}}</text> -->
				<text>广东省  深圳市  南山区  前海湾</text>
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="conent_2">
			<view class="content2">
				<view class="content2_pro" v-for="(item,index) in pro" :key="index">
					<!-- <image :src="item.goods_info.image" class="content2_pro_image"></image> -->
					<image src="../../../static/Mine/6.png"class="content2_pro_image"></image>
					<view class="content2_center">
						<view class="content2_center_name">{{item.goods_info.title}}</view>
						<view class="content2_center_spec">经典 99 枝；多头</view>
					</view>
					<view class="content2_price">
						<view class="text3">￥{{item.goods_info.price}}</view>
						<view style="margin-top: 86rpx;" class="text3">x{{item.goods_info.num}}</view>
					</view>
				</view>
				<!-- <view class="section-3-total">共{{orderinfo.total_num}}件商品，实付<text>￥{{orderinfo.total_price}}</text></view> -->
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="conent_3 ">
			<view class="right2">
				<text class="text2">商品金额</text>
				<text class="text3">￥<text style="font-size:36rpx;">{{orderinfo.total_price}}</text></text>
			</view>
			<view class="right2">
				<text class="text2">运费金额</text>
				<text class="text3">￥<text style="font-size: 36rpx;">{{orderinfo.distribution_fee}}</text></text>
			</view>
			<view class="right2">
				<text class="text2">平台优惠</text>
				<text class="text5">-￥<text style="font-size: 36rpx;">{{orderinfo.coupon_price}}</text></text>
			</view>
			<view class="section-3-total">共{{orderinfo.total_num}}件，实付<text
					style="font-size: 24rpx;">￥</text><text>{{orderinfo.total_price}}</text></view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="conent_4 border">
			<view class="text2">订单信息</view>
			<view>
				<view class="text">订单号码<text class="text3">{{orderinfo.order_no}}</text> <text class="copy">复制</text></view>
				
			</view>
			<view class="text">创建时间<text class="text3">{{orderinfo.create_time}}</text></view>
			<view class="text">支付时间<text class="text3">{{orderinfo.create_time}}</text></view>
			<view class="text">
				收货方式<text class="text3">德邦物流</text>
			</view>
			<view class="text">收货地址
			<!-- <text class="text3">{{orderinfo.address}}</text> -->
			<text class="text3">广东省  深圳市  南山区  前海湾</text>
			</view>
			<view class="text">物流单号<text class="text3">6123456789123</text></view>
			<view class="logistices">
				<view class="text">物流进度</view>
				<view class="content">
					<view class="log_list">
						<view class='logisit' v-if="logList.length !=0" v-for="(item,index) in logList" >
						  <view class='list' :style="{'border-left':item.id == logList.length-1 ? '':'1px solid #E5E5E5'}">
							<view class="left">
							  <!-- <image class='list_fin_img' v-if="item.id == 0&&logList.length>1" ></image> -->
							  <image class='list_fin_img' v-if="item.id == 0&&logList.length>1" src="../../../static/Mine/circle.png"></image>
							  <!-- <image class='list_start_img' v-if="item.id != 0"></image> -->
							  <image class='list_start_img' v-if="item.id != 0" src="../../../static/Mine/gantan_icon3.png"></image>
							</view>
							<view class="right">
							  <view :class="item.id == 0 ? 'list_name_last' : 'list_name' " >{{item.AcceptStation}}</view>
							  <view :class="item.id == 0 ? 'list_dates_last' : 'list_dates' ">{{item.AcceptTime}}</view>
							</view>
						  </view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="conent_5 ">
			<view class="kefu_time">客服工作时间:<text>9:30-22:30</text></view>
			<view class="kefu" @click="call">联系客服</view>
		</view>
		<!-- 分隔线 -->
		<view class="cut-off-rule"></view>
		<view class="conent_6">
			<view @click="orderlistck" class="order_btn"
				style="background-color: #F0F1F6; color: #000000;margin-right: 20rpx;">查看物流</view>
				<view @click="after_sales" class="order_btn">申请售后</view>
		</view>
	</view>
</template>

<script>
	import {
		orderdetail
	} from '../../../api/mine.js'
	import mSidebar from "./components/m-sidebar/m-sidebar.vue"
	import mSteps from './components/m-steps/m-steps.vue'
	export default {
		components: {
			mSidebar,
			mSteps
		},
		data() {
			return {
				user: [],
				orderinfo: [],
				pro: [],
				icon: [{
						status: '3',
						name: '己关闭',
						url: "../../../static/Mine/close.png"
					},
					{
						status: '2',
						name: '待发货',
						url: "../../../static/Mine/dai.png"
					},
					{
						status: '1',
						name: '交易成功',
						url: "../../../static/Mine/or.png"
					},
					{
						status: '0',
						name: '待付款',
						url: "../../../static/Mine/payno.png"
					},
				],
				status: '己关闭', //订单状态
				order_no: '20210830142055PO83091',
				activity: 0,
				logList:[
				{id:0,AcceptStation:'商品己送达',AcceptTime:'2021.03.10 8:00'},
				{id:1,AcceptStation:'己发货',AcceptTime:'2021.03.09 8:00'},
				{id:2,AcceptStation:'平台出货中',AcceptTime:'2021.03.08 8:00'},
				],
				}
		},
		onLoad(id) {
			console.log(id)
			this.order_no = id.orderno || '20210830142055PO83091'
			this.gitorderdetail()
		},
		methods: {
			// 查看物流
			orderlistck(){
				uni.navigateTo({
					url:'/pages/Mine/orderInfo/logistics'
				})
			},
			// 联系客服
			call(){
				uni.makePhoneCall({
		      // 手机号
			       phoneNumber: '13712345678',
			       // 成功回调
			       success: (res) => {
			           console.log('调用成功!')
			       },
			       // 失败回调
			     fail: (res) => {
			           console.log('调用失败!')
			        this.call_phone();//重复调用一次
			   }
			});
			},
			// 申请售后
			after_sales() {
				uni.navigateTo({
					url: '../afters/afterSales?order_id' + this.order_no
				})
			},
			gitorderdetail() {
				orderdetail({
					order_no: this.order_no
				}).then(res => {
					if (res.status == 200) {
						console.log(res.cart_list)
						this.user = res.data.user
						// console.log(this.user)
						this.orderinfo = res.data
						this.pro = res.data.cart_list
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		font-size: 26px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}
	.header {
		background: linear-gradient(94deg, rgba(255, 115, 171, 1), rgba(255, 74, 146, 1));
		width: 100%;
		height: 300rpx;
		display: flex;
		justify-content: space-around;
		color: #FFF;
		line-height: 250rpx;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
		}

	}

	.header-time {
		display: block;
		float: left;
	}

	.conent_1 {
		position: relative;
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 12rpx;
		margin: 20rpx;
		z-index: 999;
		top: -84rpx;
		font-size: 32rpx;
		font-weight: 600;
		// height: 160rpx;
		// line-height: 160rpx;
		align-items: center;
		justify-content: center;

		.address {
			margin-top: 10rpx;
			height: 50rpx;
			line-height: 50rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}

	.conent_2 {
		position: relative;
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-toP: -100rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
			.content2_pro {
			width: 100%;
			padding: 20rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

				.content2_pro_image {
					width: 180rpx;
					height: 180rpx;
					display: block;
					flex-shrink: 0;
					border-radius: 20rpx;
				}

				.content2_center {
					flex: 1;
					padding: 20rpx 8rpx;
					box-sizing: border-box;
					margin-left: 20rpx;

					.content2_center_name {
						max-width: 310rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-size: 26rpx;
						line-height: 32rpx;
						color: #171E3A;
						font-weight: 600;
					}

					.content2_center_spec {
						font-size: 22rpx;
						color: #9A9EA9;
						line-height: 32rpx;
						padding-top: 20rpx;
						word-break: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						margin-top: 58rpx;
					}
				}

				.content2_price {
					text-align: right;
					font-size: 28rpx;
					color: #171E3A;
					line-height: 30rpx;
					padding-top: 20rpx;
				}
			}
	}

	.right2 {
		display: flex;
		justify-content: space-between;
	}

	.right {
		z-index: 999;
		margin-left: 50rpx;
	}

	.text {
		color: #888888;
		margin-top: 15rpx;
		margin-bottom: 40rpx;
	}

	.text2 {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.text3 {
		color: #333333;
		font-size: 26rpx;
		font-weight: 600;
		margin-left: 60rpx;
	}

	.text4 {
		font-weight: 600;
	}
	.text5{
		color: #FF4891;
	}
	.copy{
		margin-left: 50rpx;
		color: #171E3A;;
		background-color: #F0F1F6;
		padding: 10rpx 15rpx;
		border-radius: 10rpx;
	}
	.conent_3 {
		position: relative;
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		.section-3-total {
			// border-bottom: 1rpx solid #F0F0F0;
			text-align: right;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;

			text {
				color: #FF4891;
				font-weight: 600;
				font-size: 40rpx;
			}
		}
	}

	.conent_4 {
		position: relative;
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 12rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		.content {
			padding: 40rpx 40rpx 0 40rpx;

			.row {
				padding: 24rpx 0;
			}
			// 物流追踪
			.log_list{
				width: 100%;
				height: 100%;
				// margin-top: 130rpx;
				.logisit{
				  width: 100%;
				  font-size: 22rpx;
				}
				.list{
					width: 90%;
					margin: auto;
					display: flex;
					justify-content: flex-start;
					position: relative;
					.left{
						margin-left: 10rpx;
						position: absolute;
						left: -26rpx;
						width: 30rpx;
						text-align: center;
						.list_fin_img{
							width: 30rpx;
							height: 30rpx;
							background: #FD1470;
							border-radius: 50%;
						}
						.list_start_img{
						   width: 24rpx;
						   height: 24rpx;
						   background: #F0F1F6;
						   border-radius: 50%;
						}
					}
					.right{
						// font-size: 22rpx;
						width: 90%;
						margin-left: 50rpx;
						margin-bottom: 50rpx;
						.list_name_last, .list_name{
						  width: 100%;
						  margin-top: -20rpx;
						  text-align: left;
						  font-size: 28rpx;
						}
						.list_name_last{
							color: #333333;
							font-size: 30rpx;
							font-weight: 600;
							}
						.list_name{
						  color: #999999;
						  font-size: 30rpx;
						}
						.list_dates_last{
						  color: #9B9FAA;
						  font-size: 26rpx;
						  margin-top: 10rpx;
						}
						.list_dates{
						  font-size: 26rpx;
						  margin-top: 10rpx;
						  color: #999999;
						}
					}
				}
				
			}
		}
	}

	.conent_5 {
		position: relative;
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		.kefu_time {
			color: #888888;

			text {
				color: #000000;
			}
		}

		.kefu {
			color: #FF4891;
			font-size: 28rpx;
			font-weight: 500;
		}

	}

	.cut-off-rule {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}

	.conent_6 {
		display: flex;
		// float: right;
		justify-content: flex-end;
		background-color: #FFF;
		text-align: center;
		align-items: center;
		align-content: center;
		font-weight: 500;
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		padding: 10rpx 30rpx 10rpx 0;
		.order_btn {
			margin-left: 10rpx;
			width: 160rpx;
			height: 50rpx;
			background-color: #FF4891;
			display: block;
			float: right;
			border-radius: 50rpx;
			align-items: center;
			color: #fff;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.logistices{
		display: flex;
		justify-content: end;
		
	}
</style>
